<template>
  <div class="o-toolbutton">
    <!-- button -->
    <Button
      v-if="type === 'button'"
      :class="[
        'titbtn',
        disabled ? 'disabled' : '',
        color ? 'color-' + color : ''
      ]"
      type="text"
      :disabled="disabled"
      :title="title"
      @click="buttonClicked"
      :style="{ background: background ? '' : 'transparent' }"
    >
      <Icon :custom="icon" v-show="showicon && icon !== ''" />
      <span v-show="dot" class="titbtn-dot"></span>
      <b v-show="showtitle && title !== ''"> {{ title }}</b>
    </Button>
    <!-- dropdown -->
    <Dropdown
      v-else-if="type === 'dropdown' && select !== true"
      :trigger="trigger"
      :transfer="transfer"
      @on-click="dropdownClicked"
      :placement="placement"
      :class="disabled ? 'disabled' : ''"
    >
      <Button
        :class="[
          'titbtn',
          disabled ? 'disabled' : '',
          color ? 'color-' + color : ''
        ]"
        type="text"
        :style="{ background: background ? '' : 'transparent' }"
        :title="title"
        @click="dropdownClicked(null)"
        ><Icon :custom="icon" v-show="showicon && icon !== ''" /><span
          v-show="dot"
          class="titbtn-dot"
        ></span
        ><b v-show="showtitle && title !== ''">{{ title }}</b></Button
      >
      <DropdownMenu slot="list">
        <slot name="drop"></slot>
      </DropdownMenu>
    </Dropdown>

    <!-- select -->
    <div
      class="button-dropdown-group"
      v-else-if="type === 'dropdown' && select === true"
    >
      <Button
        :class="[
          'titbtn',
          disabled ? 'disabled' : '',
          color ? 'color-' + color : ''
        ]"
        type="text"
        :disabled="disabled"
        :title="title"
        :style="{ background: background ? '' : 'transparent' }"
        @click="dropdownClicked(null)"
        ><Icon :custom="icon" v-show="showicon && icon !== ''" /><span
          v-show="dot"
          class="titbtn-dot"
        ></span
        ><b v-show="showtitle && title !== ''">{{ title }}</b></Button
      >
      <Dropdown
        trigger="click"
        @on-click="dropdownClicked"
        :placement="placement"
      >
        <div class="button-dropdown-icon"><Icon type="ios-arrow-down" /></div>
        <DropdownMenu slot="list">
          <slot name="drop"></slot>
        </DropdownMenu>
      </Dropdown>
    </div>

    <!-- checkbox -->
    <div class="checkbox-group" v-else-if="type === 'checkbox'">
      <Checkbox @on-change="checkboxClicked" :disabled="disabled"
        ><Icon :custom="icon" v-show="showicon && icon !== ''" /><b
          v-show="showtitle && title !== ''"
          >{{ title }}</b
        ></Checkbox
      >
    </div>

    <!-- switch -->
    <Button
      v-else-if="type === 'switch' && switchlist.length > 0"
      :class="[
        'titbtn',
        disabled ? 'disabled' : '',
        color ? 'color-' + color : ''
      ]"
      type="text"
      :disabled="disabled"
      @click="switchClicked"
      :style="{ background: background ? '' : 'transparent' }"
      :title="switchlist[switch_index].title"
    >
      <Icon
        :custom="switchlist[switch_index].icon"
        v-show="showicon && switchlist[switch_index].icon !== ''"
      />
      <span v-show="dot" class="titbtn-dot"></span>
      <b
        v-show="
          showtitle &&
            switchlist[switch_index].title &&
            switchlist[switch_index].title !== ''
        "
      >
        {{ switchlist[switch_index].title }}</b
      ></Button
    >
  </div>
</template>

<script lang="ts">
/* eslint-disable camelcase */
import { T_srv, vue } from '@/services';
import { N_oToolButton } from './types';

@T_srv.comp
export default class oToolButton extends vue {
  // modify by wiz
  public compName: string = 'oToolButton';

  /**
   * props
   */
  @T_srv.prop({
    required: true,
    default: 'button'
  })
  type: string;

  @T_srv.prop({
    required: false
  })
  color: string;

  @T_srv.prop({
    required: false,
    default: true
  })
  background: boolean;

  @T_srv.prop({
    required: false,
    default: ''
  })
  icon: string;

  @T_srv.prop({
    required: false,
    default: ''
  })
  title: string;

  @T_srv.prop({
    required: false,
    default: false
  })
  dot: boolean;

  @T_srv.prop({
    required: false,
    default: false
  })
  select: boolean;

  @T_srv.prop({
    required: false,
    default: 'hover'
  })
  trigger: string;

  @T_srv.prop({
    required: false,
    default: false
  })
  transfer: boolean;

  @T_srv.prop({
    required: false,
    default: 'bottom'
  })
  placement: string;

  @T_srv.prop({
    required: false,
    default: true
  })
  showicon: boolean;

  @T_srv.prop({
    required: false,
    default: true
  })
  showtitle: boolean;

  @T_srv.prop({
    required: false,
    default: false
  })
  disabled: boolean;

  @T_srv.prop({
    required: false,
    default: () => {
      return [];
    }
  })
  switchlist!: Array<N_oToolButton.I_list>;

  @T_srv.prop({
    required: false,
    default: false
  })
  manually: boolean;

  @T_srv.model('modelchange') value: any;

  @T_srv.watch('value')
  onValueChange(val: any) {
    if (this.type === 'switch') {
      this.switchChange(val);
    }
  }

  private switch_index = 0;

  mounted() {
    if (this.value && this.type === 'switch') {
      this.switchChange(this.value);
    }
  }

  private switchChange(key: any) {
    for (let i = 0; i < this.switchlist.length; i++) {
      if (this.switchlist[i].value === key) {
        this.switch_index = i;
        break;
      }
    }
  }

  private buttonClicked() {
    this.$emit('on-click', null);
  }

  private dropdownClicked(name: string | null) {
    this.$emit('on-click', name);
  }

  private checkboxClicked(val) {
    this.$emit('on-click', val);
  }

  private switchClicked() {
    const len = this.switchlist.length;
    let current = this.switch_index;
    if (this.switch_index + 1 === len) {
      current = 0;
    } else {
      current += 1;
    }
    if (!this.manually) {
      this.switch_index = current;
      this.$emit('modelchange', this.switchlist[current].value);
    }
    this.$emit('on-click', this.switchlist[current].value);
  }
}
</script>
<style lang="scss" scoped>
.o-toolbutton {
  display: flex;
  .disabled {
    pointer-events: none;
    color: #c5c8ce;
  }
  .ivu-btn {
    transition: all 0s;
  }
  .ivu-icon {
    transition: all 0s;
  }
  .titbtn {
    height: 32px;
    border-radius: 16px;
    font-size: var(--default-font-size);
    padding: 0 8px;
    display: flex;
    align-items: center;

    > span {
      display: block;
      height: 100%;
      line-height: 32px;
    }
    > span > i {
      font-size: var(--default-icon-size);
      display: block;
      float: left;
      margin: 8px 2px;
    }
    > span > b {
      padding: 7px 3px;
      display: block;
      float: left;
      font-weight: normal;
    }
    &:hover:not(.disabled) {
      color: var(--default-hover-font-color);
      background-color: var(--default-comp-hover-bgColor);
    }
    &.color-error:not(.disabled) {
      color: $toolbar-btn-color-error;
    }

    .titbtn-dot {
      width: 0;
      position: relative;
      display: block;
      float: left;
      &::after {
        content: '';
        height: 4px;
        width: 4px;
        border-radius: 2px;
        background-color: #fb4242;
        position: absolute;
        left: -2px;
        top: 4px;
      }
    }
  }
  .checkbox-group {
    height: 32px;
    display: flex;
    align-items: center;
    border-radius: 16px;
    transition: all 0s;
    &:hover {
      color: var(--default-hover-font-color);
      background-color: var(--default-comp-hover-bgColor);
    }
    > label {
      margin: 0 12px;
      > i {
        transition: all 0s;
        font-size: var(--default-icon-size);
        margin: 0 2px;
      }
      > b {
        transition: all 0s;
        padding: 0 3px;
        font-weight: normal;
      }
    }
  }
  .button-dropdown-group {
    transition: all 0s;
    border-radius: 16px;
    position: relative;
    &:hover {
      color: var(--default-hover-font-color);
      background-color: var(--default-comp-hover-bgColor);
    }
    .titbtn {
      padding-right: 26px;
      > span > b {
        padding-right: 0;
      }
    }
    .ivu-dropdown {
      position: absolute;
      right: 0;
      top: 0;
      > .ivu-select-dropdown {
        min-width: 100px;
      }
    }
    .button-dropdown-icon {
      height: 32px;
      width: 24px;
      transition: all 0s;
      text-align: left;
      padding-left: 2px;
      border-radius: 2px 16px 16px 2px;
      line-height: 32px;
      &:hover {
        color: var(--default-hover-font-color);
        background-color: #eee;
      }
    }
  }
}
</style>
